<template>
	<div class="register_container">
		<div class="container">
			<div class="top">
				<img src="@/assets/Login.png" />
			</div>
			<div class="bottom">
				<van-form ref="form">
					<van-field
						v-model="phone"
						name="手机号"
						label="手机号"
						placeholder="请输入手机号"
						:rules="phoneReg"
					/>
					<van-field
						v-model="code"
						center
						clearable
						label="短信验证码"
						placeholder="请输入短信验证码"
						:rules="codeReg"
					>
						<template #button>
							<van-button size="small" type="primary" @click="getVerifyCode">发送验证码</van-button>
						</template>
					</van-field>
					<van-field
						v-model="password"
						type="password"
						name="密码"
						label="密码"
						placeholder="请输入密码"
						:rules="pwdReg"
					/>
					<van-field
						v-model="rePassword"
						type="password"
						name="密码"
						label="密码"
						placeholder="请再次输入密码"
					/>
					<van-checkbox class="check" v-model="checked" icon-size="0.4rem"
						>同意协议并注册《网易严选用户协议》</van-checkbox
					>
					<div style="margin: 16px">
						<van-button round block type="info" @click="handleRegister">完成注册</van-button>
					</div>
				</van-form>
			</div>
		</div>
	</div>
</template>

<script>
import { reqVerifyCodeByPhone, reqRegister } from '@/api'
import { Notify } from 'vant'

export default {
	name: 'Register',
	data() {
		return {
			phone: '',
			password: '',
			code: '',
			rePassword: '',
			checked: false,

			// 表单验证
			phoneReg: [
				{ required: true, message: '请输入正确手机号', trigger: 'onBlur' },
				{
					validator(val) {
						return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(val)
					},
					message: '请输入正确手机号格式',
					trigger: 'onBlur',
				},
			],
			pwdReg: [
				{ required: true, message: '请输入密码', trigger: 'onBlur' },
				{
					validator(val) {
						return /^\w+$/.test(val)
					},
					message: '密码必须由英文、数字、下划线组成',
					trigger: 'onBlur',
				},
			],
			codeReg: [
				{ required: true, message: '请输入验证码', trigger: 'onBlur' },
				{
					validator(val) {
						return /^\d{6}$/.test(val)
					},
					message: '请输入正确验证码',
					trigger: 'onBlur',
				},
			],
		}
	},
	methods: {
		//获取验证码按钮的回调
		async getVerifyCode() {
			let result = await reqVerifyCodeByPhone(this.phone)
			console.log(result)
			if (result.code === 200) {
				this.code = result.data
			} else {
				Notify({ type: 'danger', message: result.message })
			}
		},
		// 完成注册
		handleRegister() {
			this.$refs.form.validate().then(async () => {
				//解构赋值获取注册所需参数
				const { phone, password, code } = this
				//请求注册
				let result = await reqRegister({ phone, password, code })
				if (result.code === 200) {
					Notify({ type: 'success', message: '注册成功' })
					this.$router.push('/login')
				} else {
					Notify({ type: 'danger', message: result.message })
				}
			})
		},
	},
}
</script>

<style lang="less" scoped>
.register_container {
	.container {
		.top {
			text-align: center;
			img {
				padding-top: 2rem;
				padding-bottom: 2rem;
				width: 3rem;
				height: 1.5rem;
			}
		}
		.bottom {
			.check {
				font-size: 0.37333rem;
				line-height: 0.64rem;
				padding: 0.26667rem 0.42667rem;
			}
		}
	}
}
</style>
